<!-- ALL+shift+上下键  移动代码-->
<!-- template放HTML script 放 js style 放css-->
<!-- 热部署：当修改代码后，会自动重启刷新页面，不需要手动刷新-->
<template>
  <h1>大家好今天是星期一</h1>
  <p>{{info}}</p>
  <h3>{{info}}</h3>
  {{info+'早上好'}}

  <hr>
  <button @click="f">按钮</button>
  <hr>
  <p>{{count}}</p>
  <button @click="f2">按钮</button>
  <hr>
<!--  渲染文本 -->
  <h4>{{x}}<</h4>
  <h4 v-text="x"></h4>
<!--  渲染成html标签-->
  <h4 v-html="x"></h4>
</template>

<!--注意：script标签上必须得有setup！-->
<!-- setup是Vue3提供的一个特殊函数，它是组合式API的入口点，可以帮助我们初始化组件-->

<script setup>
import {ref} from "vue";


//1 定义响应式变量
const info = ref("我是info");
//2 定义箭头函数
const f=()=>{
  /*在js中使用响应式变量的值，必须加 .value */
  console.log(info.value);
  //只要修改了响应式变量的值，页面绑定的数据就回自动更新
  info.value = "你变不变了";
};

//3 添加一个新的响应式变量 count，初始值为0
//在页面上新增一个<p>标签用于显示count的值
//添加一个计数按钮，每次点击，count加1
const count =ref(0);
const f2 =()=>{
  count.value++;
};
const x = ref("今天是星期二，又是一个<mark>晴天</mark>")
</script>

<style scoped>

</style>